@import './fonts/medium.scss';
@import './fonts/regular.scss';

:root {
  --content-width: 900px;
  --font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
  --font-family-code: Fira Code Retina, Fira Code, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

// mapbox 控件
.mapboxgl-ctrl-icon.mapboxgl-ctrl-home {
  background-image: url('');
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

// 样式切换器
.mapboxgl-ctrl-group {
  .mapboxgl-style-switcher {
    background-image: url();
    background-position: center;
    background-repeat: no-repeat;
    background-size: 70%;
  }
  .mapboxgl-style-list {
    display: none;
    button {
      display: block;
      width: 100%;
      height: auto;
      padding: 8px 8px 6px;
      font-size: 14px;
      text-align: right;
      cursor: pointer;
      &.active {
        font-weight: bold;
      }
      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
      & + button {
        border-top: 1px solid #ddd;
      }
    }
  }
}

// 图例
.legend {
  position: absolute;
  right: 10px;
  bottom: 38px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  &-item {
    padding: 4px 6px;
    cursor: pointer;
    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }
    .circle,
    .square {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 2px;
    }
    .circle {
      border-radius: 50%;
    }
    .text {
      color: #2c3e50;
    }
  }
}

// 公式
.formula {
  text-align: center;
  p {
    border: 1px dashed var(--c-border);
    padding: 5px;
  }
}

// 滚动条
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: var(--c-bg-light);
}

::-webkit-scrollbar-thumb {
  background-color: var(--c-brand);
}
